<template>
    <el-dialog v-model="showGradeTeamMemberWin" width="50%" draggable :popper-append-to-body="false">
        <div class="container">
            <p class="title">评分</p>
            <div class="subTitle">
                个人得分
            </div>
            <div class="content demo-1">
                <li>
                    <div class="name">学生1</div>
                    <div class="score">得分: <input type="text"></div>
                </li>
                <li>
                    <div class="name">学生2</div>
                    <div class="score">得分: <input type="text"></div>
                </li>
                <li>
                    <div class="name">学生3</div>
                    <div class="score">得分: <input type="text"></div>
                </li>
                <li>
                    <div class="name">学生4</div>
                    <div class="score">得分: <input type="text"></div>
                </li>
                <li>
                    <div class="name">学生5</div>
                    <div class="score">得分: <input type="text"></div>
                </li>
                <li>
                    <div class="name">学生6</div>
                    <div class="score">得分: <input type="text"></div>
                </li>
            </div>
            <div class="teamGrade">
                <div class="subTitle">
                    团队总评:
                </div>
                <input type="text">
            </div>
            <div class="but">
                <button @click="showGradeTeamMemberWin= false"
                    style="background-color: #939393;">
                    取消
                </button>
                <button  @click="showGradeTeamMemberWin= false; changeBaseInfor()"
                    style="background-color: #8493a6; margin-left: 21%; ">
                    确定
                </button>
            </div>
        </div>
    </el-dialog>
</template>
  
<script setup>
import { ref } from 'vue'
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    showGradeTeamMemberWin: Boolean
})

</script>
<style scoped>
.container {
    padding: 9%;
    padding-top: 3.2%;
    padding-bottom: 1%;
}

.title {
    font-family: Source Han Sans CN;
    font-size: 2.3em;
    font-weight: bolder;
    font-stretch: normal;
    line-height: 54px;
    letter-spacing: 0px;
    color: #707070;
    text-align: center;
    position: absolute;
    top: -8.5%;
    width: 81.5%;
}

.subTitle {
    width: 100%;
    margin-bottom: 1%;
    height: 4%;
    font-family: Source Han Sans CN;
    font-size: 1.54em;
    font-weight: bold;
    font-stretch: normal;
    line-height: 37px;
    letter-spacing: 0px;
    color: #707070;
    margin-top: 1.5%;
}

.content {
    width: 100%;
    height: 154px;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    align-items: center;
}

.content li {
    width: 93%;
    height: 47px;
    list-style: none;
    font-family: Source Han Sans CN;
    font-size: 1.2em;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #707070;
    display: flex;
    padding-left: 12%;
    justify-content: space-between;
    border-bottom: 1px solid #cecfcf;
    align-items: flex-end;
    background: url(../assets/images/teacher/myTeam/我的.svg) 2% 75% no-repeat;
}

/*滚动条整体样式*/
.demo-1::-webkit-scrollbar {
    margin-top: 3%;
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
}

/*滚动条里面小方块*/
.demo-1::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #d4d4d4;
    opacity: 0.3;
}

/*滚动条里面轨道*/
.demo-1::-webkit-scrollbar-track {
    /* box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2); */
    border-radius: 10px;
}

.name {
    font-family: Source Han Sans CN;
    font-size: 1.1em;
    font-weight: normal;
    font-stretch: normal;
    line-height: 37px;
    letter-spacing: 0px;
    color: #707070;
    width: 30%;
    overflow: inherit;
}

.score {
    width: 27%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5%;
}

.score input {
    width: 60%;
    height: 100%;
    font-size: 1em;
    outline: none;
}

.teamGrade input {
    width: 100%;
    outline: none;
    padding-left: 2%;
    background-color: #ffffff;
    border: solid 1px #707070;
    height: 36px;
    font-size: 1.3em;
}

.but {
    display: flex;
    justify-content: space-between;
    margin-top: 4.8%;
    margin-bottom: 3%;
    box-sizing: content-box;
    padding-left: 12%;
    padding-right: 12%;
}

.but button {
    font-family: Source Han Sans CN;
    font-size: 1.3em;
    font-weight: normal;
    font-stretch: normal;
    line-height: 34px;
    height: 43px;
    border-radius: 6px;
    letter-spacing: 0px;
    border: 0px;
    box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
    width: 80%;
    color: #fafafa;
    cursor: pointer;
}
/deep/ .el-dialog__close {
    font-size: 25px !important;
}
</style>
<style>
.el-icon svg {
    color: #707070;
}
</style>
  